<template>
    <div class="complaintRoot">
        <xxl-status></xxl-status>
        <div class="ctx" :style="{ height: 'calc( 100% - ' + header.top + 'px)' }">
            <title>
                <div slot="left">
                    <div @click="back()">返回</div>
                </div>
                <div>投诉</div>
            </title>
            <div class="content">
                <div class="time">时间:{{ order.createTime }}</div>
                <div class="id">单号:{{ order.id }}</div>
                <div class="status">状态:{{ formatStatus(order.state) }}</div>
                <div class="text"> <textarea class="textarea" v-model="text" name="" id=""></textarea></div>
            </div>
            <div class="foot">
                <div @click="commit()">
                    <xxl-botton p="15" h="30">
                        <div class="b_a">提交</div>
                    </xxl-botton>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import api from '../api';

export default {
    name: 'WorkspaceJsonIndex',

    data() {
        return {
            order: {},
            text: ""
        };
    },

    mounted() {

    },
    onLoad(o) {
        api.getOrderDataOne(o.id).then((d) => {
            if (d.code == 200) {
                this.order = d.data.orderList
            }

        })
    },
    methods: {
        back() {
            uni.navigateBack()
        },
        async commit() {
            let data = await api.complain({
                "reason": this.text,
                "orderId": this.order.id
            })
            if(data.code == 200){
                uni.navigateBack()
            }
            // console.log(data);
        },
        formatStatus(d) {
            switch (d) {
                case 1:
                    return '待支付'
                case 2:
                    return '已付款'
                case 3:
                    return '已完成'
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.paymentRoot {
    height: 100vh;
}

.ctx {}

.content {
    height: calc(100% - $uni-nav - 50px);
    box-sizing: border-box;
    padding: 10px;

    .textarea {
        margin-top: 20px;
        resize: none;
        padding: 10px;
        width: 90%;
        margin: auto;
        background: $uni-bg-color-g;
        border-radius: 10px;

    }

    .time,
    .id,
    .text,
    .status {
        margin-top: 10px;
    }
}

.foot {
    padding: 0 50px;
    margin-top: 50px;
}</style>